<template>
    <div>
        <div style="text-align: left;">
            手术预约
        </div>
        <br><br>
        <el-table :data="inpatient" style="width: 100%" border stripe>
            <el-table-column prop="pid" label="编号"> </el-table-column>
            <el-table-column prop="pname" label="姓名"> </el-table-column>
            <el-table-column prop="kname" label="科室"> </el-table-column>
        </el-table>
        <el-table :data="inpatient" style="width: 100%" border stripe>
            <el-table-column prop="srid" label="病房编号"> </el-table-column>
            <el-table-column prop="bname" label="病床号"> </el-table-column>
            <el-table-column prop="dname" label="主治医生"> </el-table-column>
        </el-table>

        <el-form ref="oper" :model="oper" label-width="80px" :inline="true" :rules="rules">
                <el-form-item label="手术名称" prop="opname">
                    
                    <el-input v-model="oper.opname" placeholder="手术名称"></el-input>

                </el-form-item>
                <el-form-item label="主刀医生" prop="did">
                    
                    <el-select v-model="oper.did" placeholder="请选择医生">
                        <el-option v-for="doctor in doctorList" :key="doctor.did" :label="doctor.dname" :value="doctor.did">
                        </el-option>
                    </el-select>
                
                </el-form-item>
                <el-form-item label="手术日期" prop="opdate">
                    
                    <el-date-picker type="date" placeholder="选择日期" v-model="oper.opdate"
                        style="width: 100%;"></el-date-picker>
                    
                </el-form-item>
        </el-form>
        <el-button type="primary" @click="onSubmit()">预约</el-button>
        <el-button @click="remo()">清空</el-button>
    </div>
</template>

<script>
//导出
export default {
    data() {
        return {
            //患者信息
            inpatient: [],
            //手术信息
            oper: {},
            //医生信息
            doctorList:[],
             //校验
             rules: {
                did: [
                    { required: true, message: '请选择医生', trigger: 'change' }
                ],
                opname: [
                    { required: true, message: '请输入手术名称', trigger: 'blur' }
             ],
             opdate:[
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
             ]
             }
        };
    },
    methods: {
        remo(){
            this.$refs['oper'].resetFields();
        },
        onSubmit(){
            if(this.oper.pid!=null){
                this.$refs['oper'].validate((valid) => {
                if (valid) {
                    this.$axios.post("operation/insert",this.oper)
                        .then((result) => {
                            let vo = result.data;
                            this.$message(vo.message);
                            if (vo.code == 200) { 
                                this.$router.push("/operation");
                            }
                        }).catch((err) => {
                            console.log(err);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            }else{
                this.$message("预约失败，未获取患者信息");
            }
        },
        list() {
            this.$axios.get("patient/getOne")
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.inpatient = vo.data;
                        this.oper.pid=this.inpatient[0].pid;
                    }
                }).catch((err) => {
                    console.log(err);
                });
                //查询所有医生
                this.$axios.get("docter/getAll?pageNum=" + 1 + "&pageSize=" + 100)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.doctorList = vo.data.list;
                    }
                }).catch((err) => {
                    console.log(err);
                });
        }
    },
    mounted() {
        this.list();
    },
};
</script>
<style></style>